<template>
    <div id="main">
        <div class="qa" v-for="item in newsList" :key="item.id">
            <img :src="item.img">
            <p id="p1">{{item.p1}}</p>
            <div id="foot">
                <p id="p2">￥{{item.p2}}</p>
                <van-icon id="icon" name="shopping-cart-o" />
            </div>
        </div>
    </div>
</template>

<script>
import { getApi } from "@/util/api.js";
    export default {
    name: "NewsList",

    data() {
        return {
        newsList: [],
        count: 1,
        };
    },

    mounted() {
        this.getNewsList();
    },

    methods: {
        getNewsList() {
        let url = "https://d.app3c.cn/mcm/api/shop/";
        getApi(url).then((res) => {
            this.newsList = res.data;
            console.log(this.newsList);
        });
        },
        goto(id) {
        this.$router.push({ name: "detail", params: { id } });
        },
    },
    };
</script>

<style lang="scss" scoped>
    #main{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        img{
            width: 100%;
        }
        .qa{
            width: 46%;
            background: #fff;
            margin-left: 2vw;
            padding-left: 1vw;
            margin-bottom: 2vw;
            #p1{
                font-size: 3.5vw;
                margin-bottom: 1vw;
            }
            #foot{
                display: flex;
                padding-bottom: 2vw;
                #p2{
                    color: rgb(238, 69, 69);
                    font-size: 3.5vw;
                }
                #icon{
                    left: 25vw;
                }
            }
        }
    }
</style>